<template>
	<view :class="tabAnimate[0]" class="nav-static" @click.stop="openTab($event)">
		<view class="nav-stander" :class="[i.active?'active_tab':'',itemAnimate[0]]" @click.stop="ot_page(i)"
			v-for="(i,index) in tabbar_items" :key="index">
			<image :src="i.active?i.img_active:i.img" class="_img"/>
			<text :style="{
				'color':i.active?'#007aff':'#14a1ff'
			}">{{i.title}}</text>
		</view>

	</view>
</template>

<script>
	// import anime from 'animejs/lib/anime.es.js';
	import {waitNavigate} from "@/util/expand_uni.js"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import mixAnimate from "@/mixins/play_animate.js"
	export default {
		name: "NavBarComponet",
		data() {
			return {
				tabAnimateCount: 0,
				itemAnimateCount:0
			};
		},
		methods: {
			...mapMutations([
				'change_active'
			]),
			openTab() {
				this.tabAnimateCount += 1;
			},
			ot_page(item) {
				this.openTab()
				waitNavigate(700,{
					url: item.page,
					success: () => {
						this.change_active(item.title_en)
					}
				})
				
			},
			closeTab() {
				if (this.tabAnimateCount % 2 !== 0) {
					this.openTab()
				}
			}
		},
		computed: {
			// 使用对象展开运算符将 getter 混入 computed 对象中
			...mapState([
				'tabbar_items'
			]),
			tabAnimate() {
				return this.playAnimateMixed(['.nav-stander', '.nav-open', '.nav-close'], this.tabAnimateCount)
			},
			itemAnimate(){
				return this.playAnimateMixed(["item-stander",".item-in",".item-out"],this.tabAnimateCount)
			}
		},
		mounted() {
			this.$bus.$on("rootCliked", () => {
				this.closeTab()
			})
		},
		mixins: [mixAnimate]
	}
</script>

<style lang="scss" scoped>
	@import "./classes.scss";

	.active_tab {
		scale: 1.1;
	}
</style>